<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>030-多列图片布局</title>
		<style>
			.outer {
				column-count: 5;
			}

			img {
				/* 100%表示，每一列的宽度 */
				width: 100%;
				transition: all 0.5s;
			}

			img:hover {
				transform: scale(1.1);
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<!-- 第一组 -->
			<img src="./images/img1.jpg" alt="图片1" />
			<img src="./images/img2.jpg" alt="图片1" />
			<img src="./images/img3.jpg" alt="图片1" />
			<img src="./images/img4.jpg" alt="图片1" />
			<img src="./images/img5.jpg" alt="图片1" />
			<img src="./images/img6.jpg" alt="图片1" />
			<img src="./images/img7.jpg" alt="图片1" />
			<img src="./images/img8.jpg" alt="图片1" />
			<img src="./images/img9.jpg" alt="图片1" />
			<img src="./images/img10.jpg" alt="图片1" />
			<img src="./images/img11.jpg" alt="图片1" />
			<img src="./images/img12.jpg" alt="图片1" />
			<img src="./images/img13.jpg" alt="图片1" />
			<img src="./images/img14.jpg" alt="图片1" />

			<!-- 第二组 -->
			<img src="./images/img1.jpg" alt="图片1" />
			<img src="./images/img2.jpg" alt="图片1" />
			<img src="./images/img3.jpg" alt="图片1" />
			<img src="./images/img4.jpg" alt="图片1" />
			<img src="./images/img5.jpg" alt="图片1" />
			<img src="./images/img6.jpg" alt="图片1" />
			<img src="./images/img7.jpg" alt="图片1" />
			<img src="./images/img8.jpg" alt="图片1" />
			<img src="./images/img9.jpg" alt="图片1" />
			<img src="./images/img10.jpg" alt="图片1" />
			<img src="./images/img11.jpg" alt="图片1" />
			<img src="./images/img12.jpg" alt="图片1" />
			<img src="./images/img13.jpg" alt="图片1" />
			<img src="./images/img14.jpg" alt="图片1" />

			<!-- 第三组 -->
			<img src="./images/img1.jpg" alt="图片1" />
			<img src="./images/img2.jpg" alt="图片1" />
			<img src="./images/img3.jpg" alt="图片1" />
			<img src="./images/img4.jpg" alt="图片1" />
			<img src="./images/img5.jpg" alt="图片1" />
			<img src="./images/img6.jpg" alt="图片1" />
			<img src="./images/img7.jpg" alt="图片1" />
			<img src="./images/img8.jpg" alt="图片1" />
			<img src="./images/img9.jpg" alt="图片1" />
			<img src="./images/img10.jpg" alt="图片1" />
			<img src="./images/img11.jpg" alt="图片1" />
			<img src="./images/img12.jpg" alt="图片1" />
			<img src="./images/img13.jpg" alt="图片1" />
			<img src="./images/img14.jpg" alt="图片1" />
		</div>
	</body>
</html>
